import React from "react"

/*
* PureComponent 和 Component 的区别：
*   PureComponent 会给类组件默认加一个 shouldComponentUpdate 周期函数
*       + 在此周期函数中，它对新老的属性 / 状态  会做一个浅比较
*       + 如果经过浅比较，发现属性和状态并没有变化，则返回 false(也就是不居胥更新组件)，有变化才去更新
*
* */
const shallowEqual = function (objA, objB) {
    if (!isObject(objA) || !isObject(objB)) return false
    if (objA === objB) return true
    // 先比较成员的数量
    let keysA = Reflect.ownKeys(objA)
    let keysB = Reflect.ownKeys(objB)
    if (keysA.length !== keysB.length) return false
    // 逐一比较内部成员(值比较第一层)
    for (let i = 0; i < keysA.length; i++) {
        let key = keysA[i];
        // 如果一个对象中有这个成员，一个对象中没有；或者，都有这个成员，但是成员值不一样，都应该被判定为为不相同
        if (!objB.hasOwnProperty(key) || !Object.is(objA[key], objB[key])) {
            return false
        }
    }
    return true

    function isObject(obj) { // 监测是否为对象
        return obj !== null && /^(object|function)$/.test(typeof obj)
    }
}

class Demo extends React.Component {
    state = {
        arr: [10, 20, 30]
    }

    render() {
        let {arr} = this.state
        return <div>
            哈哈哈
            {arr.map((item, index) => <span key={index} style={{
                display: 'inline-block',
                width: 100,
                height: 100,
                background: 'pink',
                marginRight: 10
            }}>{item}</span>)}
            <br/>
            <button onClick={() => {
                arr.push(40);// 给堆内存中新增一个 40
                // this.setState({arr}) // 修改之前的状态地址,状态地址没有改变，不会更新视图
                this.setState({
                    arr:[...arr]
                })
            }}>新增span
            </button>
        </div>
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        let {props, state} = this
        // props / state : 修改之前的属性状态
        // nextProps / nextSate：将要修改的属性状态
        console.log(state,nextState)
        console.log(shallowEqual(props, nextProps), shallowEqual(state, nextState))
        return !shallowEqual(props, nextProps) || !shallowEqual(state, nextState)
    }
}


export default Demo